<template>
  <m-layout>
    <mt-header slot="header" title="写点评" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="edit">
      <m-section :border-bottom="false" class="box">
        <div class="uesrInfo">
          <img :src="userinfo.img || '/static/images/default/avatar.png'" alt="">
          <span class="name">{{userinfo.name}}</span>
        </div>
        <div class="cnt" >
          <m-input v-model="content" type="textarea" number-word maxlength="500" placeholder="对该学员本节课的表现，做个点评吧" />
        </div>
        <div class="pic">
          <m-img-group-upload v-model="imgGroupUploadValue" :limit="9"/>
        </div>
      </m-section>
    </div>
    <div slot="bottom" class="submit">
      <mt-button type="primary" size="large" @click="submit">确定</mt-button>
    </div>
  </m-layout>
</template>

<script>
import api from 'api/reviews'
import MImgGroupUpload from '@/views/components/ImgGroupUpload'
import { Toast } from 'mint-ui'
export default {
  components: {
    MImgGroupUpload
  },
  data () {
    return {
      commentId: '',
      // orgUserId: 'seedp543381',
      studentScheduleId: '',
      studentId: '',
      value: '',
      imgGroupUploadValue: [],
      userinfo: {
        img: '',
        name: ''
      },
      content: '',
      status: 0
    }
  },
  methods: {
    submit () {
      if (this.status === 0) {
        this.saveComment()
      } else {
        this.updateComment()
      }
    },
    saveComment () {
      if (!this.content) {
        Toast({
          message: '请填写点评再提交',
          duration: 2000
        })
        return false
      }
      api.saveComment({
        studentScheduleId: this.studentScheduleId,
        studentId: this.studentId,
        content: this.content,
        filesList: this.imgGroupUploadValue.join(',')
      }).then((res) => {
        if (res.result === '0') {
          this.$router.go(-1)
        }
      }).catch(() => {})
    },
    updateComment () {
      if (!this.content) {
        Toast({
          message: '请填写点评再提交',
          duration: 2000
        })
        return false
      }
      api.updateComment({
        commentId: this.commentId,
        studentScheduleId: this.studentScheduleId,
        studentId: this.studentId,
        content: this.content,
        filesList: this.imgGroupUploadValue.join(',')
      }).then((res) => {
        if (res.result === '0') {
          this.$router.go(-1)
        }
      }).catch(() => {})
    }
  },
  mounted () {
    this.commentId = this.$route.query.commentId
    let info = window.sessionStorage.getItem('commentInfo')
    if (info) {
      this.status = 1
      let data = JSON.parse(info)
      this.content = data.content
      this.studentScheduleId = data.studentScheduleId
      this.studentId = data.studentId
      let imgArr = data.fileList.map((el) => {
        return el.filePath
      })
      this.imgGroupUploadValue = imgArr
      window.sessionStorage.removeItem('commentInfo')
    } else {
      this.studentScheduleId = this.$route.query.studentScheduleId
      this.studentId = this.$route.query.studentId
    }
    let student = window.sessionStorage.getItem('student')
    if (student) {
      let data = JSON.parse(student)
      this.userinfo.img = data.headPicture
      console.log(this.userinfo.img)
      this.userinfo.name = data.name
    }
  }
}
</script>

<style lang="scss" scoped>
.edit{
  .box{
    padding: 0.2rem;
    .uesrInfo{
      img{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 0.2rem;
      }
      .name{
        display: inline-block;
        line-height: 0.8rem;
        color: $color-sub;
      }
    }
    .cnt{
      padding: 0.2rem 0;
    }
    .pic{
      padding-top: 0.2rem;
    }
  }
}
</style>
